We’re using cookies, but you can turn them off in Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .

Show Hide

Data Track

Data Track — Show/Hide Example One
Checkbox Input Example
This example shows options that aren't required but the options to appear will be required.
This input is required but validation won't trigger when it's hidden; only when it's visible on the page.
Data Track — Show/Hide Example Two
Radio Input Example
This example shows options that aren't required but the options to appear will be required.
Required Hidden Input Two
These checkboxes are required but validation won't trigger when it's hidden; only when it's visible on the page.
Data Track — Show/Hide Example Three
This example shows options that are required.

Other country select input would go here

HTML

<form action="javascript:void(0)">
    <fieldset class="error-summary-before">
        <legend>Legend</legend>

        <div class="form-group">
            <div id="dataTrackExampleLabel" class="control-label">Checkbox Input Label</div>                        
            <div class="checkbox">
                <label for="showOne">
                    <input id="showOne" type="checkbox" value="" name="example" aria-labelledby="dataTrackExampleLabel" data-track="true" data-show="hiddenOptionOne" />
                    <span class="checkbox-label">Show/Hide hidden section</span>
                </label>
            </div>
        </div>

        <div class="form-group">
            <div id="dataTrackExampleTwoLabel" class="control-label">Radio Input Label</div>
            <div class="radio">
                <label for="showTwo">
                    <input id="showTwo" type="radio" value="" name="example" aria-labelledby="dataTrackExampleTwoLabel" data-track="true" data-show="hiddenOptionOne" />
                    <span class="radio-label">Show hidden section</span>
                </label>
            </div>
            <div class="radio">
                <label for="hideTwo">
                    <input id="hideTwo" type="radio" value="" name="example" aria-labelledby="dataTrackExampleTwoLabel" data-track="true" />
                    <span class="radio-label">Hide hidden section</span>
                </label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label" for="dataTrackSelect">Select Input Label</label>                      
            <select id="dataTrackSelect" class="form-control" name="example" data-track="true">
                <option value="">Please select an option (will also hide hidden areas because no data-show attribute)</option>
                <option value="Option One" data-show="hiddenOptionOne">Show hidden option one</option>
                <option value="Option Two" data-show="hiddenOptionTwo">Show hidden option two</option>
                <option value="Other">This will hide hidden areas because there's no data-show attribute</option>
            </select>
        </div>

        <div id="hiddenOptionOne">
////////////    Your hidden things will be here.    ////////////
        </div>
        <div id="hiddenOptionTwo">
////////////    Another optional hidden thing.    ////////////
        </div>
    </fieldset>
    <button>Submit</button>
</form>

Problem Being Solved

We have areas of content we want to show or hide based on certain conditions.

When to Use

A great place to use this is in forms where you might have more information you'd like to gather based on a user's response to questions.

When Not to Use

If accordion or toggle pattenrs are better options, use those first. Try and keep this used for forms for now or if you have questions about other scenarios, please speak with a designer and/or front end.

Formatting

  • The JS for this is located in our global files and will work on all pages as long as the attributes are being used correctly.
  • Place the content you want to hide in a container with a uinque ID (for example a div).
  • Right now, we use form inputs (select dropdown, radio, and checkbox) to toggle the show/hide of the hidden section.
  • Here's how this works for each input type:
    Checkbox Input:
    • The checkbox input should have the attributes data-track="true" and data-show="theIdOfTheHiddenContainer."
    • On check/uncheck of the input, the hidden content will toggle show/hide.
    Radio Input:
    • The radio input should have the attributes data-track="true" and data-show="theIdOfTheHiddenContainer."
    • The other radio inputs will either have just the attribute data-track="true" but not the data-show — clicking the radio input with just the data-track="true" attribute will hide the hidden section but clicking the radio input with the data-show attribute will show it again.
    • Please reach out if this explanation doesn't make sense!
    Select Input:
    • The select input should have the attribute data-track="true."
    • The select option elements will have the optional data-show attribute.
    • The option's data-show attribute should have the ID of the hidden section you want to show — if you don' thave a section you want to show, don't add the data-show attribute.
    • Aagain, please reach out if this explanation doesn't make sense!